<template>
  <a-pagination
    v-model:current="current"
    v-model:pageSize="pageSize"
    :show-size-changer="showSizeChanger"
    :total="total"
    size="small"
    :showTotal="showTotal"
    :showQuickJumper="showQuickJumper"
    @change="handlePageChange"
    @showSizeChange="handleSizeChange"
    :pageSizeOptions="pageSizeOptions"
  />
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { Pagination } from 'ant-design-vue';
  const APagination = Pagination;
  export default defineComponent({
    name: 'CustomPagination',
    components: {
      APagination,
    },
    props: {
      total: {
        type: Number,
        required: true,
      },
      showSizeChanger: {
        type: Boolean,
        default: true,
      },
      showQuickJumper: {
        type: Boolean,
        default: true,
      },
      showTotal: {
        type: Function,
        default: (total) => `共 ${total} 条`,
      },
      pageSizeOptions: {
        type: Array,
        default: () => ['2', '5', '10', '20'],
      },
    },
    emits: ['page-change', 'size-change'],
    setup(props, { emit }) {
      const current = ref(1);
      const pageSize = ref(2);

      const handlePageChange = (page) => {
        current.value = page;
        emit('page-change', page);
      };

      const handleSizeChange = (currentSize, size) => {
        pageSize.value = size;
        emit('size-change', size);
      };

      return {
        current,
        pageSize,
        handlePageChange,
        handleSizeChange,
      };
    },
  });
</script>
